<template>
  <el-dialog
    title="选择客户群"
    :visible.sync="$attrs.visable"
    width="1300px"
    :before-close="handleClose"
    append-to-body
    class="groupdia"
  >
    <div class="flex h_box">
      <div class="box1 h_full">
        <div class="boxheader flexcenter">
          <el-input
            placeholder="搜索企微号"
            v-model="queryParams.keyword"
            class="input-with-select"
            size="small"
          >
            <el-button
              slot="append"
              size="small"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
        <div class="boxbody">
          <div class="accoutitem commhover flex mb-3">
            <img
              src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
              alt=""
              class="avatar mr-12"
            />
            <div class="itemcontent">
              <div class="c_text2 f-14 mb-3 textover">小星星</div>
              <div class="c_f90 f-12 mt-2 textover">@之星</div>
            </div>
          </div>
        </div>
      </div>

      <div class="box1 box2 h_full">
        <div class="boxheader flexbetween">
          <span>筛选</span>
          <el-button type="primary" size="small" plain class="p-3">清空条件</el-button>
        </div>
        <div class="boxbody">
          <el-form
            ref="form"
            :model="queryParams"
            label-position="top"
            class="filterform"
          >
            <el-form-item label="群名称：" class="mb-10">
              <el-select
                v-model="form.grouptype"
                placeholder=""
                size="small"
                class="mr-8"
                style="width: 126px"
              >
                <el-option label="含任意关键词" :value="1"></el-option>
                <el-option label="含所有关键词" :value="2"></el-option>
              </el-select>
              <el-input
                placeholder="可输入多个，按Enter确认"
                v-model="form.name"
                size="small"
                class="mt-3"
                style="width: 182px"
                @keyup.enter.native="handleAddLable"
              >
                <el-button
                  slot="append"
                  size="small"
                  icon="el-icon-plus"
                  @click="handleAddLable"
                ></el-button>
              </el-input>
            </el-form-item>
            <div v-if="form.labels.length" class="labelbox mt-5">
              <div
                class="labelitem c_text ml-5 mb-5"
                v-for="(item, index) in form.labels"
                :key="index"
              >
                {{ item }}
                <i
                  class="el-icon-close commhover"
                  @click="removeLable(index)"
                ></i>
              </div>
            </div>
            <el-form-item label="群名称：" class="mb-10">
              <el-select
                v-model="form.labeltype"
                placeholder=""
                size="small"
                class="mr-8"
                style="width: 126px"
              >
                <el-option label="含任意关键词" :value="1"></el-option>
                <el-option label="含所有关键词" :value="2"></el-option>
                <el-option label="未打所有标签" :value="3"></el-option>
              </el-select>
              <el-select
                v-model="form.grouplabel"
                placeholder="群标签"
                size="small"
                clearable
                style="width: 182px"
              >
                <el-option label="含任意关键词" :value="1"></el-option>
                <el-option label="含所有关键词" :value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="其他：" class="mb-10">
              <el-input
                value="是否群主/管理"
                size="small"
                class="mr-8"
                style="width: 126px"
                placeholder=""
              />
              <el-select
                v-model="form.grouplabel"
                placeholder="请选择"
                size="small"
                clearable
                style="width: 182px"
              >
                <el-option label="群主/群管理员" :value="1"></el-option>
                <el-option label="群主" :value="2"></el-option>
                <el-option label="群成员" :value="3"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="" class="mb-10">
              <el-input
                value="群成员数"
                size="small"
                class="mr-8"
                style="width: 126px"
                placeholder=""
              />
              <el-popover
                placement="bottom-start"
                width="236"
                v-model="visible"
              >
                <div class="flex">
                  <el-input
                    v-model="form.min"
                    placeholder="最小值"
                    size="small"
                    style="width: 90px"
                  />
                  <div class="linebox flexcenter">~</div>
                  <el-input
                    v-model="form.max"
                    placeholder="最大值"
                    size="small"
                    style="width: 90px"
                  />
                </div>
                <div>
                  <el-button
                    type="primary"
                    class="w_full mt-10"
                    size="mini"
                    @click="submitNum"
                    >确定</el-button
                  >
                </div>
                <el-select
                  slot="reference"
                  :value="numberstr"
                  placeholder="请选择"
                  size="small"
                  style="width: 182px"
                >
                </el-select>
              </el-popover>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!--  -->
      <div class="box1 box3 h_full">
        <div class="boxheader flexbetween">
          <div>
            <el-checkbox v-model="checkedAll"></el-checkbox
            ><span class="c_text2 fw-6 ml-12">客户群</span>
          </div>
        </div>
        <div class="boxbody p-0">
          <div
            class="groupitem flex aligncenter"
            v-for="(item, index) in grouplist"
            :key="index"
          >
            <div class="flex groupleft">
              <div class="checkbox flexcenter">
                <el-checkbox v-model="item.checked"></el-checkbox>
              </div>
              <div class="accoutitem commhover flex mb-3">
                <img
                  src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
                  alt=""
                  class="avatar mr-12"
                />
                <div class="itemcontent">
                  <div class="c_text2 f-14 textover">测试群</div>
                  <div class="c_888999 f-12 textover">群成员3</div>
                </div>
              </div>
            </div>
            <div class="labelbox f-12">群主</div>
          </div>
        </div>
      </div>

      <div class="box1 box4 h_full">
        <div class="boxheader flexbetween">
          <span class="c_text2 fw-6 ml-12">已选择(1)</span>
          <span class="c_primary commhover">清空</span>
        </div>
        <div class="boxbody p-12">
          <div
            class="groupitem flexbetween p-8"
            v-for="(item, index) in checkGroupList"
            :key="index"
          >
            <div class="g_name textover">{{item.name}}</div>
            <div><i class="el-icon-remove-outline f-16 commhover"></i></div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      queryParams: {
        keyword: "",
      },
      form: {
        grouptype: 1,
        name: "",
        labels: [],
        labeltype: 1,
        grouplabel: "",
        min: "",
        max: "",
      },
      visible: false,
      numberstr: "",
      grouplist: [{ id: 1, name: "测试群", checked: false }],

      checkGroupList: [{ id: 1, name: "测试群", checked: false }],
      checkedAll: false, //全选
    };
  },

  methods: {
    handleClose() {
      this.$emit("close", 1); //关闭弹窗;
    },

    handleAddLable() {
      if (this.form.name) {
        if (this.form.labels.includes(this.form.name)) {
          this.$message.warning("标签重复");
          return;
        }
        this.form.labels.push(this.form.name);
        this.form.name = "";
      }
    },

    removeLable(index) {
      this.form.labels.splice(index, 1);
    },

    submitNum() {
      this.numberstr = this.form.min + " ~ " + this.form.max;
      console.log("this.numberstr:", this.numberstr);
      this.visible = false;
    },

    handleSubmit() {},
  },
};
</script>

<style lang="scss" scoped>
.h_box {
  height: 580px;
}
.box1 {
  width: 250px;
  border-right: 1px solid #e9e9e9;
}
.box2 {
  width: 350px;
}
.boxheader {
  padding: 0 12px;
  height: 42px;
  background: #fafafa;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 11;
}
.groupdia {
  ::v-deep .el-dialog__body {
    padding: 0;
  }
}
.input-with-select {
  width: 225px;

  ::v-deep .el-input-group__append {
    padding: 0 14px;
    background-color: #fff;
  }
}
.boxbody {
  height: calc(100% - 42px);
  overflow-y: auto;
  padding: 10px 0;
}
.accoutitem {
  padding: 6px 12px;
  &.active {
    background-color: #ebf2ff;
  }
  &:hover {
    background-color: #f0f0f0;
  }

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }
  .itemcontent {
    width: calc(100% - 52px);
  }
}
.filterform {
  padding: 0 16px;
  ::v-deep .el-form-item__label {
    line-height: 26px;
    padding-bottom: 0;
  }
  ::v-deep .el-input-group__append {
    padding: 0 14px;
  }
}
.labelitem {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  background-color: #fafafa;
  padding: 2px 7px;
  line-height: 22px;
}
.linebox {
  width: 36px;
}
.box3 {
  width: 460px;
}
.groupitem {
  width: 100%;
  &.active {
    background-color: #ebf2ff;
  }
  &:hover {
    background-color: #f0f0f0;
  }

  .groupleft {
    width: calc(100% - 50px);
  }
  .checkbox {
    width: 40px;
  }
  .labelbox {
    background: #f1f1f4;
    border-radius: 2px;
    border: 1px solid #c1c1f1;
    color: #4b5a95;
    line-height: 20px;
    padding: 2px 8px;
  }
  .g_name{
    width: 90%;
  }
}
.box4{
    width: 240px;
}
</style>